<template>
  <div>
    <navigationBar ref="navigationBar"/>
    <div class="major-detail-container">
      <div class="major-detail__left">
        <div class="major-name">
          <span>{{ majorDetailInfo.majorName }}</span>
          <div
              class="major-simple-info mt-2"
              ref="majorDetail0"
              id="majorDetail0"
              v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
            <v-chip
                class="mr-2"
                color="primary"
                text-color="white">
              <v-avatar left tile>
                <v-icon size="20">mdi-bookmark-multiple</v-icon>
              </v-avatar>
              <span>学历层次：{{ majorDetailInfo.level }}</span>
            </v-chip>
            <v-chip
                class="ma-2"
                color="primary"
                text-color="white">
              <v-avatar left tile>
                <v-icon size="22">mdi-clock</v-icon>
              </v-avatar>
              <span>修业年限：{{ majorDetailInfo.studyYear }}</span>
            </v-chip>
            <v-chip
                class="ma-2"
                color="primary"
                text-color="white">
              <v-avatar left tile>
                <v-icon size="22">mdi-school</v-icon>
              </v-avatar>
              <span>授予学位：{{ majorDetailInfo.degree }}</span>
            </v-chip>
          </div>
        </div>
        <div class="major-desc">{{ majorDetailInfo.introduction }}</div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-0"
            id="majorDetail0-0"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-graduation-cap
            </v-icon>
            <span>培养目标</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.trainingObjective }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-1"
            id="majorDetail0-1"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-th-large
            </v-icon>
            <span>培养要求</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.trainingRequirements }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-2"
            id="majorDetail0-2"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-bell
            </v-icon>
            <span>专业要求</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.disciplineRequirements }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-3"
            id="majorDetail0-3"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-box
            </v-icon>
            <span>知识能力</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.knowledgeAbility | formatTextWrap }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-4"
            id="majorDetail0-4"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-book
            </v-icon>
            <span>主要课程</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.mainCourse }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-5"
            id="majorDetail0-5"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-road
            </v-icon>
            <span>考研方向</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.postgraduateOientation }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-6"
            id="majorDetail0-6"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-th-large
            </v-icon>
            <span>就业方向</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.employmentDirection }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail0-7"
            id="majorDetail0-7"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-users
            </v-icon>
            <span>社会名人</span>
          </div>
          <div class="detail-content">
            <p class="text-justify">
              {{ majorDetailInfo.celebrity }}
            </p>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail1"
            id="majorDetail1">
          <div
              class="detail-title"
              ref="majorDetail1-0"
              id="majorDetail1-0"
              v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
            <v-icon color="primary">
              fas fa-venus-mars
            </v-icon>
            <span>男女比例</span>
          </div>
          <div class="detail-content">
            <div class="statistical-data">
              <v-row no-gutters>
                <v-col cols="6">
                  <v-chip
                      class="gender-ratio-container"
                      label
                      x-large
                      color="#fff">
                    <div>
                      <div class="gender-ratio d-flex align-center text-body-1">
                        <div class="male">男 {{ majorDetailInfo.proportion.split(':')[0] }}%</div>
                        <v-progress-linear
                            class="mx-4"
                            color="rgba(30, 136, 229, .9)"
                            background-color="rgb(238, 153, 0)"
                            height="16"
                            rounded
                            :value="majorDetailInfo.proportion.split(':')[0]"/>
                        <div class="female">女 {{ majorDetailInfo.proportion.split(':')[1] }}%</div>
                      </div>
                    </div>
                  </v-chip>
                </v-col>
              </v-row>
            </div>
          </div>
        </div>
        <div
            class="major-info mt-10"
            ref="majorDetail1-1"
            id="majorDetail1-1"
            v-intersect="{
            handler: onIntersect,
            options: {
              threshold: [0.5]
            }
          }">
          <div class="detail-title">
            <v-icon color="primary">
              fas fa-yen-sign
            </v-icon>
            <span>就业与薪资</span>
          </div>
          <div class="detail-content">
            <div class="recently-average-wage mt-4">
              <ECharts
                  class="average-wage-chart"
                  ref="averageWageChart"
                  :option="averageWageChartOption"
                  :setOptionOpts="{ notMerge: true }"/>
            </div>
            <div class="distribution-charts mt-4">
              <div class="chart-container">
                <div class="e-charts">
                  <ECharts
                      class="occupational-distribution-chart chart"
                      ref="occupationalDistributionChart"
                      :option="occupationalDistributionChartOption"
                      :setOptionOpts="{ notMerge: true }"/>
                </div>
                <v-simple-table
                    class="mx-4"
                    :class="windowWidth <= 900 ? 'mb-6' : ''"
                    :dence="windowWidth <= 900">
                  <template v-slot:default>
                    <tbody>
                    <tr
                        v-for="item in majorDetailInfo.careers"
                        :key="item.careerKey">
                      <td>{{ item.careerKey }}</td>
                      <td class="text-right">{{ item.careerValue }}</td>
                    </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </div>
              <div class="chart-container">
                <div class="e-charts">
                  <ECharts
                      class="industry-distribution-chart chart"
                      ref="industryDistributionChart"
                      :option="industryDistributionChartOption"
                      :setOptionOpts="{ notMerge: true }"/>
                </div>
                <v-simple-table
                    class="mx-4"
                    :class="windowWidth <= 900 ? 'mb-6' : ''"
                    :dence="windowWidth <= 900">
                  <template v-slot:default>
                    <tbody>
                    <tr
                        v-for="item in majorDetailInfo.industrys"
                        :key="item.industryKey">
                      <td>{{ item.industryKey }}</td>
                      <td class="text-right">{{ item.industryValue }}</td>
                    </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </div>
              <div class="chart-container">
                <div class="e-charts">
                  <ECharts
                      class="area-distribution-chart chart"
                      ref="areaDistributionChart"
                      :option="areaDistributionChartOption"
                      :setOptionOpts="{ notMerge: true }"/>
                </div>
                <v-simple-table
                    class="mx-4"
                    :class="windowWidth <= 900 ? 'mb-6' : ''"
                    :dence="windowWidth <= 900">
                  <template v-slot:default>
                    <tbody>
                    <tr
                        v-for="item in majorDetailInfo.areas"
                        :key="item.areaKey">
                      <td class="">{{ item.areaKey }}</td>
                      <td class="text-right">{{ item.areaValue }}</td>
                    </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="major-detail__right">
        <catalog
            ref="catalog"
            v-model="catalogList"
            :fixed="catalogFixed"
            @catalogClick="handleCatalogClick"/>
      </div>
    </div>
  </div>
</template>

<script>
import navigationBar from "@/components/navigationBar/navigationBar";
import catalog from "@/components/catalog/catalog";
import {majorDetailInfo} from "@/views/majorDetail/mockData";
import {getMajorDetail} from "../../api";

export default {
  name: "majorDetail",
  components: {
    navigationBar, catalog
  },
  data() {
    return {
      majorId: '',
      majorDetailInfo: {},
      catalogList: [
        {
          id: 'majorDetail0',
          title: '专业介绍',
          children: [
            {
              id: 'majorDetail0-0',
              title: '培养目标'
            },
            {
              id: 'majorDetail0-1',
              title: '培养要求'
            },
            {
              id: 'majorDetail0-2',
              title: '专业要求'
            },
            {
              id: 'majorDetail0-3',
              title: '知识能力'
            },
            {
              id: 'majorDetail0-4',
              title: '主要课程'
            },
            {
              id: 'majorDetail0-5',
              title: '考研方向'
            },
            {
              id: 'majorDetail0-6',
              title: '就业方向'
            },
            {
              id: 'majorDetail0-7',
              title: '社会名人'
            },
          ]
        },
        {
          id: 'majorDetail1',
          title: '统计数据',
          children: [
            {
              id: 'majorDetail1-0',
              title: '男女比例'
            },
            {
              id: 'majorDetail1-1',
              title: '就业与薪资'
            }
          ]
        }
      ], //目录列表
      catalogFixed: false, //目录是否固定显示
      catalogOffsetTop: 0, //目录在初始位置时距离页面顶部的高度
    }
  },
  methods: {
    // 初始化
    async init() {
      this.majorId = this.$route.params.majorId ?? '';
      this.majorDetailInfo = majorDetailInfo;
      let res = await getMajorDetail(this.majorId)
      if(res.success){
        this.majorDetailInfo = res.data
      }else{
        this.alert('获取专业详细信息失败，请稍后再试', 'error');
      }

    },
    /**
     * 目录点击事件
     * @param {String} id 目录节点的id
     */
    handleCatalogClick(id) {
      this.$vuetify.goTo(this.$refs[id], {
        duration: 500
      });
    },
    // 节点视界发生交互时的回调方法（元素是否可见）
    onIntersect(entries, observer, isIntersecting) {
      this.$refs.catalog.onIntersect(entries[0].target.id, isIntersecting);
    },
    getMajorDetail() {
    }
  },
  computed: {
    // 屏幕宽度实时数值
    windowWidth() {
      return this.$store.state.screenWidth + 5;
    },
    // 页面滚动高度
    scrollTop() {
      return this.$store.state.scrollTop;
    },
    // 平均薪资图表配置选项
    averageWageChartOption: {
      get() {
        return {
          title: {
            text: '近10年平均薪资',
            left: 'center',
            subtext: `平均薪资：￥${this.majorDetailInfo.salarys[0].salaryValue.toUpperCase()}`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            }
          },
          color: ['#1e88e5'],
          grid: {
            left: '0px',
            right: '30px',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: this.majorDetailInfo.salarys.map(item => `${item.salaryKey}年`).reverse()
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
            name: '平均薪资',
            type: 'line',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}元'
            },
            areaStyle: {},
            data: this.majorDetailInfo.salarys.map(item => Number(item.salaryValue.replace('k', '')) * 1000).reverse()
          }]
        };
      }
    },
    // 职业分布图表配置选项
    occupationalDistributionChartOption: {
      get() {
        return {
          title: {
            text: '主要职业分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            valueFormatter: value => `${value}%`
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              center: ['50%', '150px'],
              data: this.majorDetailInfo.careers.map(item => Object.freeze({
                value: Number(item.careerValue.replace('%', '')),
                name: item.careerKey
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      }
    },
    // 行业分布图表配置选项
    industryDistributionChartOption: {
      get() {
        return {
          title: {
            text: '主要行业分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            valueFormatter: value => `${value}%`
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              center: ['50%', '150px'],
              data: this.majorDetailInfo.industrys.map(item => Object.freeze({
                value: Number(item.industryValue.replace('%', '')),
                name: item.industryKey
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      }
    },
    // 就业地区分布图表配置选项
    areaDistributionChartOption: {
      get() {
        return {
          title: {
            text: '主要就业地区分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            valueFormatter: value => `${value}%`
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              center: ['50%', '150px'],
              data: this.majorDetailInfo.areas.map(item => Object.freeze({
                value: Number(item.areaValue.replace('%', '')),
                name: item.areaKey
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      }
    }
  },
  filters: {
    // 格式化文本分号换行
    formatTextWrap(text) {
      return !!text ? text.replaceAll('；', '；\n') : text;
    },
    formatMoney(money) {
      return `￥${money.toUpperCase()}`;
    }
  },
  watch: {
    windowWidth: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.catalogFixed = false;
          this.catalogOffsetTop = this.$refs.catalog.$refs.catalog.offsetTop;
        });
      }
    },
    scrollTop: {
      immediate: true,
      handler(nval, oval) {
        this.catalogFixed = nval >= this.catalogOffsetTop; //页面滚动高度小于目录初始位置时让目录归位
        if (nval <= 100 && oval > 100) {
          this.$refs.catalog.setIntersecting('majorDetail0');
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.catalogOffsetTop = this.$refs.catalog.$refs.catalog.offsetTop; //获取目录的初始位置
    });
  },
  created() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
@import "majorDetail";
</style>